<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('货位一览')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .container-div {
            padding: 5px;
            position: relative;
        }
        .notHave {
            background: #d3d3d3;
        }
        .have {
            background: #748ede;
        }
        .billOutIng {
            background: #FFFF00;
        }
        .billInIng {
            background: #FFC0CB;
        }
        .lockCell {
            background: #A52A2A!important;
        }
        .headerBox {
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        .el-divider--vertical {
            width: 2px!important;
            height: 25px!important;
            margin: 0 20px!important;
        }
        .tag {
            width: 100px;
            height: 40px;
            color: #000000;
            text-align: center;
            line-height: 40px;
            border-radius: 8px;
            font-size: 16px;
            margin-right: 10px;
        }
        #seat {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 70px;
        }
        .cellPai {
            width: 100%;
            padding: 8px;
        }
        .shelfName {
            width: 120px;
            height: 40px;
            border-radius: 8px;
            background: #B3C0D1;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .shelfName span {
            color: #000000;
            font-size: 18px;
        }
        .shelfBox {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 8px;
        }
        .cell {
            /*width: calc(100% / 52);*/
            width: calc(100% / 44);
            height: 50px;
            /*border-radius: 8px;*/
            text-align: center;
            line-height: 50px;
            outline: 1px solid #EBEEF5;
        }
        .borderNone {
            outline: none!important;
        }
        .el-input.is-disabled .el-input__inner {
            width: 200px!important;
            color: #000000!important;
        }
        .chartBox {
            position: absolute;
            width: 45%;
            height: 380px;
            bottom: 20px;
            right: 30px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
            background: #E9EEF3;
        }
        .chartText {
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #000;
            font-size: 18px;
        }
        #chart {
            width: 100%;
            height: calc(100% - 50px);
        }
    </style>
</head>
<body>
<div class="container-div">
    <!-- 顶栏容器 -->
    <div class="headerBox">
        <!-- 楼层选择 -->
        <i class="fa fa-hand-o-right fa-2x" style="color: #409EFF;margin-right: 10px"></i>
        <el-button v-for="(item, index) in floorList" :key="index" :plain="checkFloorId != item.id" type="primary" @click="getFloorId(item.id)" v-cloak>
            {{item.text}}层
        </el-button>
        <!-- 分割线 -->
        <el-divider direction="vertical"></el-divider>
        <!-- 货位状态 -->
        <span v-for="(item, index) in statusList" :key="index" class="tag" :class="item.colorClass" v-cloak>{{item.stateText}}</span>
        <span class="tag lockCell"><i class="fa fa-close"></i> 封禁</span>
    </div>
    <!-- hover显示货位位置 -->
    <el-tag id="seat" effect="dark" v-show="seatState" v-cloak>{{location}}</el-tag>
    <!-- HC-A线 -->
    <div class="cellPai" style="margin-top: 30px">
        <div class="shelfName">
            <span v-cloak>HC-A{{checkFloorId}}</span> <i class="fa fa-arrow-circle-o-right fa-2x" style="color: #000"></i>
        </div>
        <div class="shelfBox">
            <div class="cell" v-for="(item, index) in cellListA" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.lock == 2 ? 'lockCell' : '']">
                <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
            </div>
        </div>
    </div>
    <!-- HC-B线 -->
    <div class="cellPai">
        <div class="shelfName">
            <span v-cloak>HC-B{{checkFloorId}}</span> <i class="fa fa-arrow-circle-o-right fa-2x" style="color: #000"></i>
        </div>
        <div class="shelfBox">
            <div class="cell" v-for="(item, index) in cellListB" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.lock == 2 ? 'lockCell' : '']">
                <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
            </div>
        </div>
    </div>
    <!-- HC-C线 -->
    <div class="cellPai">
        <div class="shelfName">
            <span v-cloak>HC-C{{checkFloorId}}</span> <i class="fa fa-arrow-circle-o-right fa-2x" style="color: #000"></i>
        </div>
        <div class="shelfBox">
            <div class="cell" v-for="(item, index) in cellListC" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.lock == 2 ? 'lockCell' : '']">
                <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
            </div>
        </div>
    </div>
    <div style="width: 100%;height: 85px"></div>
    <!-- HC-D线 -->
    <div class="cellPai">
        <div class="shelfName">
            <span v-cloak>HC-D{{checkFloorId}}</span> <i class="fa fa-arrow-circle-o-right fa-2x" style="color: #000"></i>
        </div>
        <div class="shelfBox">
            <div class="cell" v-for="(item, index) in cellListD" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.lock == 2 ? 'lockCell' : '']">
                <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
            </div>
            <div class="cell borderNone" v-for="(item, index) in replenish" :key="index"></div>
        </div>
    </div>
    <!-- HC-E线 -->
    <div class="cellPai">
        <div class="shelfName">
            <span v-cloak>HC-E{{checkFloorId}}</span> <i class="fa fa-arrow-circle-o-right fa-2x" style="color: #000"></i>
        </div>
        <div class="shelfBox">
            <div class="cell" v-for="(item, index) in cellListE" :key="index" @click="showMsg(item)" @mouseenter="showSeat(item.memo)" @mouseleave="showSeat(0)" :class="[item.state == 0 ? 'notHave' : '', item.state == 1 ? 'have' : '', item.state == 2 ? 'billOutIng' : '', item.state == 3 ? 'billInIng' : '', item.lock == 2 ? 'lockCell' : '']">
                <i v-if="item.lock == 2" class="fa fa-close" style="color: #000"></i>
            </div>
            <div class="cell borderNone" v-for="(item, index) in replenish" :key="index"></div>
        </div>
    </div>
    <!-- 货位详情弹出框 -->
    <el-dialog title="货位详情" width="400px" :visible.sync="showMsgState" append-to-body="true">
        <el-row>
            <el-form :inline="true" label-width="100px" :model="msgInfo" class="demo-ruleForm">
                <el-form-item size="small" label="货位编码:">
                    <el-input v-model="msgInfo.cellCode" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="货位描述:">
                    <el-input v-model="msgInfo.memo" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="货位状态:">
                    <el-input v-model="msgInfo.stateText" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="封禁状态:">
                    <el-input v-model="msgInfo.lockText" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="单晶编号:" v-if="msgInfo.materialId">
                    <el-input v-model="msgInfo.materialId" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="物料编码:" v-if="msgInfo.materialProduct">
                    <el-input v-model="msgInfo.materialProduct" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="单晶规格:" v-if="msgInfo.specId">
                    <el-input v-model="msgInfo.specId" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="客户等级:" v-if="msgInfo.materialCategory">
                    <el-input v-model="msgInfo.materialCategory" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="单晶PN型:" v-if="msgInfo.materialPN">
                    <el-input v-model="msgInfo.materialPN" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="拼棒类型:" v-if="msgInfo.assemblyType">
                    <el-input v-model="msgInfo.assemblyText" disabled="true"></el-input>
                </el-form-item>
                <el-form-item size="small" label="电阻率:" v-if="msgInfo.resistance">
                    <el-input v-model="msgInfo.resistance" disabled="true"></el-input>
                </el-form-item>
            </el-form>
        </el-row>
    </el-dialog>
    <!-- 图表 -->
    <div class="chartBox">
        <div class="chartText">货位利用率</div>
        <div id="chart"></div>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/echarts/echarts.js}"></script>
<script th:inline="javascript">
    var vue = new Vue({
        el: '.container-div',
        data: {
            //楼层列表
            floorList: [
                // {id: '1', text: '一'},
                {id: '2', text: '二'},
                {id: '3', text: '三'},
                {id: '4', text: '四'},
                {id: '5', text: '五'},
                {id: '6', text: '六'}
            ],
            //货位状态列表
            statusList: [
                {colorClass: 'notHave', stateText: '无货'},
                {colorClass: 'have', stateText: '有货'},
                {colorClass: 'billOutIng', stateText: '出库中'},
                {colorClass: 'billInIng', stateText: '入库中'}
            ],
            //选择的楼层id
            checkFloorId: '2',
            //每层各缓存线对应的货位列表
            cellListA: [],
            cellListB: [],
            cellListC: [],
            cellListD: [],
            cellListE: [],
            //D线、E线补齐44货位
            replenish: ['18列', '19列', '20列', '21列', '22列', '23列', '24列', '25列', '26列', '27列', '28列', '29列', '30列', '31列', '32列', '33列', '34列', '35列', '36列', '37列',
                '38列', '39列', '40列', '41列', '42列', '43列', '44列'],
            //货位详情弹出框状态
            showMsgState: false,
            //货位详情弹出框信息
            msgInfo: {},
            //hover显示货位位置信息状态
            seatState: false,
            //hover显示货位位置信息
            location: ''
        },
        methods: {
            //获取楼层id
            getFloorId(id){
                this.checkFloorId = id;
                this.getMsg(id);
            },
            //获取货位信息
            getMsg(id){
                var that = this;
                that.cellListA = [];
                that.cellListB = [];
                that.cellListC = [];
                that.cellListD = [];
                that.cellListE = [];
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/cellInfo/findByCellInfoDto",
                    data: {
                        sFloor: id
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        var list = data.rows;
                        for(var i = 0; i < list.length; i++){
                            if(list[i].sPai == 1){
                                that.cellListA.push(list[i]);
                            }else if(list[i].sPai == 2){
                                that.cellListB.push(list[i]);
                            }else if(list[i].sPai == 3){
                                that.cellListC.push(list[i]);
                            }else if(list[i].sPai == 4){
                                that.cellListD.push(list[i]);
                            }else if(list[i].sPai == 5){
                                that.cellListE.push(list[i]);
                            }
                        }
                    }
                });
            },
            //显示某个货位信息
            showMsg(e){
                this.showMsgState = true;
                this.msgInfo = e;
                if(this.msgInfo.state == 0){
                    this.msgInfo.stateText = "无货";
                }else if(this.msgInfo.state == 1){
                    this.msgInfo.stateText = "有货";
                }else if(this.msgInfo.state == 2){
                    this.msgInfo.stateText = "出库中";
                }else if(this.msgInfo.state == 3){
                    this.msgInfo.stateText = "入库中";
                }else if(this.msgInfo.state == 4){
                    this.msgInfo.stateText = "故障";
                }else if(this.msgInfo.state == 8){
                    this.msgInfo.stateText = "禁用";
                }else{
                    this.msgInfo.stateText = "盘点";
                }
                if(this.msgInfo.lock == 1){
                    this.msgInfo.lockText = "正常";
                }else if(this.msgInfo.lock == 2){
                    this.msgInfo.lockText = "封禁";
                }
                if(this.msgInfo.assemblyType == 1){
                    this.msgInfo.assemblyText = "整棒";
                }else if(this.msgInfo.assemblyType == 2){
                    this.msgInfo.assemblyText = "二拼";
                }else if(this.msgInfo.assemblyType == 3){
                    this.msgInfo.assemblyText = "三拼";
                }
            },
            //hover显示某个货位位置
            showSeat(e){
                this.location = '';
                if(e){
                    this.seatState = true;
                    this.location = e;
                }else{
                    this.seatState = false;
                }
            },
            //绘制图表
            drawChart(){
                var haveA = 0;
                for(var i = 0; i < this.cellListA.length; i++){
                    if(this.cellListA[i].state != 0 && this.cellListA[i].state != 4 && this.cellListA[i].state != 8){
                        haveA += 1;
                    }
                }
                var numA = parseFloat((haveA*100)/44).toFixed(2);
                var haveB = 0;
                for(var j = 0; j < this.cellListB.length; j++){
                    if(this.cellListB[j].state != 0 && this.cellListB[j].state != 4 && this.cellListB[j].state != 8){
                        haveB += 1;
                    }
                }
                var numB = parseFloat((haveB*100)/44).toFixed(2);
                var haveC = 0;
                for(var x = 0; x < this.cellListC.length; x++){
                    if(this.cellListC[x].state != 0 && this.cellListC[x].state != 4 && this.cellListC[x].state != 8){
                        haveC += 1;
                    }
                }
                var numC = parseFloat((haveC*100)/44).toFixed(2);
                var haveD = 0;
                for(var y = 0; y < this.cellListD.length; y++){
                    if(this.cellListD[y].state != 0 && this.cellListD[y].state != 4 && this.cellListD[y].state != 8){
                        haveD += 1;
                    }
                }
                var numD = parseFloat((haveD*100)/17).toFixed(2);
                var haveE = 0;
                for(var z = 0; z < this.cellListE.length; z++){
                    if(this.cellListE[z].state != 0 && this.cellListE[z].state != 4 && this.cellListE[z].state != 8){
                        haveE += 1;
                    }
                }
                var numE = parseFloat((haveE*100)/17).toFixed(2);
                var chart = echarts.init(document.getElementById('chart'));
                var num = [numA, numB, numC, numD, numE];
                for(var o = 0; o < num.length; o++){
                    if(num[o] == '0.00'){
                        num[o] = '0';
                    }else if(num[o] == '100.00'){
                        num[o] = '100';
                    }
                }
                chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>{a}：{c}%'
                    },
                    grid: {
                        top: 5,
                        left: 15,
                        bottom: 0,
                        right: 15,
                        containLabel: true
                    },
                    xAxis: {
                        show: false
                    },
                    yAxis: [
                        {
                            show: true,
                            data: ['HC-A' + this.checkFloorId, 'HC-B' + this.checkFloorId, 'HC-C' + this.checkFloorId, 'HC-D' + this.checkFloorId, 'HC-E' + this.checkFloorId],
                            inverse: true,
                            axisLine: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#000'
                            }
                        }, {
                            show: false,
                            inverse: true,
                            data: num
                        }
                    ],
                    series: [
                        {
                            name: '货位利用率',
                            type: 'bar',
                            data: num,
                            barWidth: 12,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 15,
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0, [
                                            {
                                                offset: 0,
                                                color: '#22B6ED'
                                            }, {
                                                offset: 1,
                                                color: '#3FE279'
                                            }
                                        ]
                                    )
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    formatter: function(data){
                                        if(num[data.dataIndex] > 85){
                                            return '{a|' + num[data.dataIndex] + '%}';
                                        }else{
                                            return '{b|' + num[data.dataIndex] + '%}';
                                        }
                                    },
                                    rich: {
                                        a: {
                                            color: '#FF3030'
                                        },
                                        b: {
                                            color: '#000'
                                        }
                                    }
                                }
                            }
                        }
                    ]
                }, true);
            }
        },
        created(){
            this.getMsg(this.checkFloorId);
        },
        mounted(){
            this.drawChart();
        },
        watch: {
            'checkFloorId': {
                handler: function(){
                    this.drawChart();
                }
            }
        }
    })
</script>
</body>
</html>
